<template>
	<view class="profile">
		<view class="info">
				<view class="avatar">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						name="1"
						:maxCount="1"
						:previewFullImage="true"
					>
						<u-avatar :src="vuex_user.avatar_url" size="60" default-url="/static/icon/m.png"></u-avatar>
					</u-upload>

				</view>
				<view class="info-item">
					<view class="name">{{vuex_user.name}}</view>
					<view class="email">邮箱：{{vuex_user.email}}</view>
				</view>
		</view>
		<view class="cell-group">
			<u-cell-group>
				<u-cell icon="list" title="个人信息" :isLink="true" url="/pages/profile/baseInfo"></u-cell>
			</u-cell-group>
		</view>
		<view class="cell-group">
			<u-cell-group>
				<u-cell icon="rmb-circle" title="所有订单" :isLink="true"></u-cell>
				<u-cell icon="star" title="商品收藏" :isLink="true"></u-cell>
				<u-cell icon="map" title="收货地址" :isLink="true" @click="toAddress"></u-cell>
			</u-cell-group>
		</view>
		<view class="cell-group">
			<u-cell-group>
				<u-cell icon="close-circle" title="退出登录" :isLink="true" @click="logout"></u-cell>
				<u-modal :show="isLogout" title='确定退出?'
					content="退出之后, 自动返回到首页"
					:showCancelButton="true"
					@confirm="confirmLogout"
					@cancel="cancelLogout">
				</u-modal>
				<u-notify ref="uNotify"></u-notify>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogout: false,
				fileList: []
			}
		},
		onLoad() {
			// 判断用户是否登录
			if (!this.$u.utils.isLogin()) return
		},
		methods: {
			logout() {
				this.isLogout = true
			},
			async confirmLogout() {
				this.isLogout = false
				await uni.$u.http.post('/api/auth/logout')
				// 提示退出成功
				this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						message: '退出成功',
						duration: 1500,
						safeAreaInsetTop:true
				})
				setTimeout(() => {
					// 清除vuex中的vuex_token 与 vuex_user
					this.$u.vuex('vuex_token', null)
					this.$u.vuex('vuex_user', {})
					// 跳转到首页
					uni.$u.route({
						type: 'reLaunch',
						url: 'pages/index/index',
					})
				}, 1500)
			},
			cancelLogout() {
				this.isLogout = false
			},
			async afterRead(event) {
				// 获取文件后缀名
				let {file} = event
				// #ifdef H5
				let fileSuffix = file.name.slice(file.name.lastIndexOf('.'))
				// #endif
				// #ifndef H5
				let fileSuffix = file.thumb.slice(file.thumb.lastIndexOf('.'))
				// #endif
				// 获取阿里云OSS Token
				const res = await uni.$u.http.get('/api/auth/oss/token')
				// console.log(res)
				// 生成唯一文件名
				const fileName = uni.$u.guid(20) + fileSuffix
				
				// // 上传图片
				uni.uploadFile({
					url: res.host,
					filePath: file.url,
					name: 'file',
					formData: {
						'key': fileName,
						'policy': res.policy,
						'OSSAccessKeyId': res.accessid, 
						'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
						'signature': res.signature,
					},
					success: async () => {
						// 上传成功后，更新头像
						await uni.$u.http.post('/api/user/avatar',{
							avatar: fileName
						})
						uni.$u.toast('更换头像成功')
						// 获取用户信息
						const userInfo = await uni.$u.http.get('/api/user')
						this.$u.vuex('vuex_user', userInfo)
					}
				});
			},
			toAddress() {
				uni.$u.route({
					url: 'pages/profile/address/address'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ededed;
	}
	.profile {
		.info {
			background-color: #FFFFFF;
			display: flex;
			padding: 40rpx;
			.avatar {
				margin-right: 40rpx;
			}
			.info-item {
				.name {
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}
				.email {
					color: #888;
				}
			}
		}
		.cell-group {
			margin-top: 30rpx;
			background-color: #FFFFFF;
		}
	}
</style>
